<template>
  <div class="headers clear">
    <div class="logo">
      <!--<img src="../assets/logo.png" alt="">-->
    </div>
    <div class="navs">
      <ul class="clear">
        <li v-for="(item,key) in nav" v-if="key != islogin">
          <router-link v-bind:to='item.url' v-bind:id="key" active-class="active">{{ item.title }}</router-link>
        </li>
        <li v-if="islogin == 5">lv小痞子</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Headers',
  data () {
    return {
      nav: [
        {
          'title': '首页', 'url': '/home'
        },
        {
          'title': '企业介绍', 'url': '/introduction'
        },
        {
          'title': '产品方案', 'url': '/product'
        },
        {
          'title': '咨询分享', 'url': '/share'
        },
        {
          'title': '下载服务', 'url': '/downs'
        },
        {
          'title': '登录/注册', 'url': '/sign'
        }
      ],
      islogin: this.$store.state.isLogin
    }
  }
}
</script>
<style scoped lang="less">
.headers{
  width: 100%;
  height: 75px;
  min-width: 1200px;
  background: #fff;
  .logo{
    float: left;
    height: 100%;
    margin-left: 67px;
    img{
      display: block;
      border: none;
      max-width: 100%;
      margin-top: 16px;
    }
  }
  .navs{
    float: right;
    ul{
      width: 100%;
      height: 100%;
      li{
        height: 100%;
        width: 169px;
        text-align: center;
        line-height: 75px;
        float: left;
        position: relative;
        &:before{
          content: "";
          width: 1px;
          height: 25px;
          background: #c8c8c8;
          position: absolute;
          top: 25px;
          right: 0;
        }
        &:last-child{
          &:before{
            display: none;
          }
        }
        a{
          display: block;
          font-size: 14px;
          color: #333;
          &.active{
            background: #3a8ee6;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
